<template>
  <div>
    <h1>生命周期：{{message}}</h1>
  </div>
</template>


<script>
export default {

  data () {
    return {

      message: '123456'

    }
  },

  methods: {

  },


  beforeCreate () {
    console.group('------beforeCreate创建前状态------');
    console.log('beforeCreate:' + this.$el)
    console.log('beforeCreate:' + this.$data)
    console.log("%c%s", "color:red", "message: " + this.message)

  },


  created () {
    console.group('------created创建完毕状态------');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },

  beforeMount: function () {
    console.group('------beforeMount挂载前状态------');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  mounted: function () {
    console.group('------mounted 挂载结束状态------');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  updated: function () {
    console.group('updated 更新完成状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeDestroy: function () {
    console.group('beforeDestroy 销毁前状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  destroyed: function () {
    console.group('destroyed 销毁完成状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message)
  }



}
</script>

<style scoped>
.zhi {
  font-size: 100px;
}
</style>